<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>利用统计</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <jsp:include page="/inc/head.jsp" flush="true"/>
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="${basePath}/assets/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <jsp:include page="/inc/footer.jsp" flush="true"/>
    <script src="${basePath}/assets/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
    <script src="${basePath}/assets/bootstrap-datepicker/dist/locales/bootstrap-datepicker.fr.min.js"></script>
    <script src="${basePath}/assets/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="${basePath }/js/tip.js"></script>
    <script type="text/javascript" src="${basePath}/js/echarts.js"></script>
    <style>
        .fixed-table-toolbar .search,.fixed-table-toolbar .columns {
            top:-10px;
            margin: 0;
        }
        .fixed-table-toolbar .columns {
            margin-left: 5px;
        }
        .bootstrap-table {
            margin-top: -20px;
        }
        #formSearch .form-group input {
            height: 28px;
            border:1px solid #ccc;
            border-radius:3px;
        }
        #formSearch .form-group label {
            text-align: right;
            padding-right: 0;
        }
        .content .bootstrap-table .fixed-table-toolbar .icon-refresh {
            padding: 3px 0;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini" >
<!-- Main content -->
<section class="content">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:0px">
                    <label class="control-label col-sm-1" for="yearCountStart">时间</label>
                    <div class="col-sm-5">
                        <input type="text" id="yearCountStart" class="input-medium search-query" style="width: 120px"  readonly >
                        --
                        <input type="text" id="yearCountEnd" class="input-medium search-query" style="width: 120px"  readonly>
                    </div>
                    <div class="col-sm-3" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" onclick="searchAction()" class="btn btn-primary">查询</button>
                        <button type="button" style="margin-left:50px" id="btn_clean" onclick="queryParamsCountClean()" class="btn btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="userTablebar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" onclick="showDataTable()">
            <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>数据列表
        </button>
        <button id="btn_change" type="button" class="btn btn-default" onclick="proporChange()">
            <span class="glyphicon glyphicon-road" aria-hidden="true"></span>占比转换
        </button>
    </div>
    <div id="showDataCount">
        <table id="useTable"></table>
    </div>
    <div id="showProporCount" style="display: none;">
        <!-- 占比转换利用件数饼状图 -->
        <div id="proporChart1" style="height:500px ;width:50%;float:left">
        </div>
        <!-- 占比转换利用人次饼状图 -->
        <div id="proporChart2" style="height:500px ;width:50%;float:right">
        </div>
    </div>
</section>
</body>
<script type="text/javascript">

    var $table = $("#useTable");

    var archiveType = {};

    //档案类型数组 利用于饼状图中
    var archiveTypeArr = [];

    //占比转换利用件数状图表
    var proporChart1;

    //占比转换利用人次状图表
    var proporChart2;

    $(function(){
        //加载档案类型
        $.ajax({
            url: BASE_PATH+"/manage/archivestype/getArchivesType",
            type:"get",
            data:"",
            dataType:"json",
            async:false,
            success:function (data) {
                for(var index in data){
                    archiveType[data[index].sortNum] = data[index].sortName
                    archiveTypeArr.push(data[index].sortName);
                }
            }
        });
        //加载时间控件
        bootStrapDate('yearCountStart');
        bootStrapDate('yearCountEnd');
        showuseTable();
    })

    function showuseTable() {
        $table.bootstrapTable({
            url: BASE_PATH+"/pcwindow/getUseCountTable",
                height: '500',
            queryParams:"defaultParams",
            striped: true,
//            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: false,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            showFooter:true,
            searchOnEnterKey: true,
            idField: 'id',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'classify', title: '分类',width:'18%' ,align: 'center',formatter:'classifyFormatter',footerFormatter:function (){return "合计"}},
                {field: 'searchVolNum', title: '检索卷数', width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"searchVolNum")}},
                {field: 'searchItemNum', title: '检索件数',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"searchItemNum")}},
                {field: 'searchManNum', title: '检索人次',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"searchManNum")}},
                {field: 'borrowVolNum', title: '借阅卷数', width:'8%',align: 'center',footerFormatter:function(value){return countTotal(value,"borrowVolNum")}},
                {field: 'borrowItemNum', title: '借阅件数',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"borrowItemNum")}},
                {field: 'borrowManNum', title: '借阅人次',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"borrowManNum")}},
                {field: 'printItemNum', title: '打印件数',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"printItemNum")}},
                {field: 'printManNum', title: '打印人次',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"printManNum")}},
                {field: 'allItemNum', title: '总件数',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"allItemNum")}},
                {field: 'allManNum', title: '总人次',width:'8%', align: 'center',footerFormatter:function(value){return countTotal(value,"allManNum")}}
//                {field: 'action', title: '被注', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
            ],
            onLoadSuccess:function(data){
                //无数据隐藏分页
                if(data && data.total == 0){
                    $('.fixed-table-pagination').hide()
                }
            }
        });
    }

    //计算总计
    function countTotal(value,field){
        var count = 0;
        for (var i in value) {
            if(value[i][field]!=null){
                count += value[i][field];
            }
        }
        return count
    }

    //传递参数翻页时保留
    function defaultParams(params) {
        var firstDate = $("#yearCountStart").val();
        var lastDate = $("#yearCountEnd").val();
        var temp = {
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            firstDate:firstDate,
            lastDate: lastDate
        };
        return temp;
    }

    //分类初始化
    function classifyFormatter(value,row,index) {
        return archiveType[value];
    }
    
    //清空查询条件
    function queryParamsCountClean(){
        $("#yearCountStart").val("");
        $("#yearCountEnd").val("");
    }

    //BootStrap日期
    function bootStrapDate(id){
        var idr="#"+id;
        $(idr).datepicker({
            startView: 0,
            autoclose: true,
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            locale: moment.locale('zh-cn'),
            endDate: new Date()
        });
    }

    //查询数据
    function searchAction(){
        var firstDate = $("#yearCountStart").val();
        var lastDate = $("#yearCountEnd").val();
        //先判断当前是哪个div显示
        var isShow = $("#showDataCount").is(":hidden");
        //如果隐藏了 则刷新echarts 否则刷新table
        if(isShow){
            proporChange();
        }else {
            var opt = {
                url: BASE_PATH+"/pcwindow/getUseCountTable",
                query:{
                    firstDate:firstDate,
                    lastDate:lastDate
                }
            };
            $table.bootstrapTable("refresh",opt);
        }
    }

    //数据列表显示
    function showDataTable() {
        $("#showDataCount").show();
        $("#showProporCount").hide();
        searchAction();
    }
    
    //占比转换
    function proporChange() {
        if(proporChart1!=null){
            proporChart1.dispose();
        }
        var firstDate = $("#yearCountStart").val();
        var lastDate = $("#yearCountEnd").val();
        $("#showDataCount").hide();
        $("#showProporCount").show();
        $.ajax({
            url:BASE_PATH+"/pcwindow/getUseCountPropor",
            type:'post',
            data:{firstDate:firstDate,lastDate:lastDate},
            dataType:"json",
            success:function (data) {
                var chartsItemDate = [];
                var chartsManDate = [];
                //记录从后台拿到的数据中包含的档案类型
                var recordClassify = [];
                for(var index in data){
                    var chartsItemJson = {};
                    var chartsManJson = {};
                    var classify = data[index].classify;
                    var allItemNum = data[index].allItemNum;
                    var allManNum = data[index].allManNum;
                    var classifyName = archiveType[classify];
                    if(classifyName!=null&&typeof(classifyName)!="undefined"){
                        chartsItemJson.name = classifyName;
                        chartsItemJson.value = allItemNum;
                        chartsManJson.name = classifyName;
                        chartsManJson.value = allManNum;
                        chartsItemDate.push(chartsItemJson);
                        chartsManDate.push(chartsManJson);
                        recordClassify.push(classifyName);
                    }
                }
                //判断当前的chartsDate中是否有档案类型 如果没有 则将其默认为0
                for(var index in archiveTypeArr){
                    var classifyName = archiveTypeArr[index];
                    var isRecord = recordClassify.indexOf(classifyName);
                    //如果不包含，同样将其加入到数组中 并赋值为0
                    if(isRecord==-1){
                        var chartsItemJson = {};
                        var chartsManJson = {};
                        chartsItemJson.name = classifyName;
                        chartsItemJson.value = 0;
                        chartsManJson.name = classifyName;
                        chartsManJson.value = 0;
                        chartsItemDate.push(chartsItemJson);
                        chartsManDate.push(chartsManJson);
                    }
                }
                showProperItemCharts(archiveTypeArr,chartsItemDate);
                showProperManCharts(archiveTypeArr,chartsManDate);
            }
        });
    }

    //展示占比情况
    function showProperItemCharts(archiveTypeArr,chartsDate){
        /**
         * 初始化echarts实例
         */
        proporChart1 =echarts.init(document.getElementById("proporChart1"),'inno');
        proporChart1.showLoading();
        var option = {
            title : {
                text: '各档案分类利用件数情况',
//                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:archiveTypeArr
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:chartsDate
                }
            ]
        };
        proporChart1.hideLoading();
        proporChart1.setOption(option);
    }

    //展示占比情况
    function showProperManCharts(archiveTypeArr,chartsDate){
        /**
         * 初始化echarts实例
         */
        proporChart2 =echarts.init(document.getElementById("proporChart2"),'inno');
        proporChart2.showLoading();
        var option = {
            title : {
                text: '各档案分类利用人次情况',
//                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:archiveTypeArr
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:chartsDate
                }
            ]
        };
        proporChart2.hideLoading();
        proporChart2.setOption(option);
    }
</script>
</html>